<template>
  <div class="largeModel-container">
    <div class="left">
      <div class="tips">
        {{$t('largeModel.largeAppTips')}}  <!--可勾选添加下列大模型泛化的相似问添加到列表，或调整配置，重新生成-->
      </div>
      <div class="search-container">
        <el-row :gutter="15">
          <el-form ref="elForm" :model="formData"  size="mini" label-width="51px">
            <el-col :span="24">
              <el-form-item :label="$t('largeModel.problem')+':'" prop="content" > <!--问题-->
                <el-input v-model="formData.content" clearable :style="{width: '100%'}" ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6" style="margin-left: 51px">
              <el-form-item  prop="largeModel" label-width="0">
                <el-select v-model="formData.largeModel" :placeholder="$t('largeModel.largeModelTips')" clearable :style="{width: '100%'}">
                  <el-option
                    v-for="(item) in largeList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <!--提示词-->
              <el-form-item  prop="tipWord" label-width="0">
                <div style="display: flex;align-items: center;justify-content: space-between">
                  <el-select v-model="formData.tipWord" :placeholder="$t('largeModel.selectTipWordTips')" clearable :style="{width: '100%'}">
                    <el-option
                      v-for="item in promptList"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"
                    >
                    </el-option>
                  </el-select>
                  <el-link type="primary" @click="showPrompt = true" :underline="false" style="white-space: nowrap;margin-left: 5px" v-if="formData.largeModel"> <!--v-if="formData.largeModel&&formData.tipWord"-->
                    {{$t('aicosCommon.addBtn')}}  <!--新增-->
                  </el-link>
                </div>
              </el-form-item>
            </el-col>
            <el-col :span="6" v-if="modeList.length">
              <!--生成模式-->
              <el-form-item  prop="mode"  label-width="0" >
                <el-select v-model="formData.mode" :placeholder="$t('largeModel.selectModeTip')" clearable :style="{width: '100%'}">
                  <el-option
                    v-for="item in modeList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  >
                    <span style="float: left">{{ item.name }}</span>
                    <el-tooltip class="item" effect="dark" :content="$t('largeModel.commonModeTips')" placement="top" v-show="item.id == '1'">
                      <span style="float: right;margin-top: 10px" class="el-icon-warning-outline"></span>
                    </el-tooltip>
                    <el-tooltip class="item" effect="dark" :content="$t('largeModel.precisionTips')" placement="top" v-show="item.id == '2'">
                      <span style="float: right;margin-top: 10px" class="el-icon-warning-outline"></span>
                    </el-tooltip>
                    <el-tooltip class="item" effect="dark" :content="$t('largeModel.extensionTips')" placement="top" v-show="item.id == '3'">
                      <span style="float: right;margin-top: 10px" class="el-icon-warning-outline"></span>
                    </el-tooltip>
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <img src="./asset/resetBtn.png" style="height: 28px;cursor:pointer;" @click="handlerReBuild" v-if="formData.largeModel&&formData.tipWord&&!showPrompt"/>
              <img src="./asset/resetDisableBtn.png" style="height: 28px;cursor:pointer;" v-if="formData.largeModel&&formData.tipWord&&showPrompt">
            </el-col>
          </el-form>
        </el-row>

        <transition name="el-zoom-in-top">
          <Prompt
            v-if="showPrompt"
            :formData="formData"
            :content="question"
            type="similar"
            @handlerTest="handlerTest"
            @handlerSave="handlerSave"
            @handlerCancel="handlerCancel"
          />
        </transition>

      </div>
      <div class="table-container" style="position: relative">

        <div style="position: absolute;right: 10px;top: 13px;z-index: 99">
          <el-link :underline="false" type="primary" @click="handlerSelectAll">{{$t('largeModel.selectAll')}}</el-link>
        </div>

        <avue-crud
          :option="option"
          :table-loading="loading"
          :data="data"
          ref="crud"
          v-model="form"
        >

          <template v-slot:menu="scope">
            <HuilanBasicActionTool
              :actions="getRowActions(scope.row,scope.index,data)"
              @command="handleCommand($event, scope.row,scope.index)"
            />
          </template>
        </avue-crud>
      </div>
    </div>

    <div class="right">

      <div class="right-list">
        <div class="right-title"> <!--选中的相似问列表-->
          {{$t('largeModel.selectedSimilarQuestionList')}}
        </div>
        <ul class="list-ul" v-if="chooseList.length > 0">
          <li class="list-item" v-for="(item,index) in chooseList" :key="index">
            <div class="list-item-text">{{item.similarProblems}}</div>
            <div class="list-item-operate">
              <el-link :underline="false" type="primary" style="margin-right: 10px" @click="handlerRemove(item,index,'left')">{{$t('largeModel.delete')}}</el-link>
            </div>
          </li>
        </ul>
        <div style="color: #a9acb3;height: 440px;display: flex;align-items: center" v-else>
          {{$t('largeModel.noSelectedSimilarQuestionList')}}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  modelList,
  modelPromptList,
  modelSettingFirstChat,
  modelSettingChat,
} from "@/api/aiccApi/aiccLargeModel";
import Prompt from "@/components/aiccComponent/prompt.vue";
 export default {
   components: {Prompt},

   props:{
     question:{
       type:String,
       default:""
     },
   },

   data(){
      return{
        option:{
          header: false,
          tip: false,
          searchShow: true,
          searchMenuSpan: 4,
          border: false,
          index: false,
          selection: false,
          viewBtn: false,
          delBtn:false,
          editBtn: false,
          menuAlign: "center",
          menuTitle:' ',
          //dialogType: 'drawer',
          dialogClickModal: false,
          dialogWidth: "40%",
          dialogType: 'drawer',
          emptyText: this.$t('aiccCommon.emptyMsg'),
          dialogCustomClass: 'huilan-drawer-form',
          form: {},
          column:[
            {
              label:this.$t('smalltalk.similarProblems'),
              prop:'similarProblems',
              overHidden: true,
            },
          ],
        },

        formData:{
          content:'',
          tipWord:'',
          mode:''
        },
        showPrompt:false,
        loading:false,
        largeList:[],
        promptList:[],
        modeList:[],
        searchList:[],
        chooseList:[],
        data:[],
      }
   },
  mounted(){
    this.getModelList();

    this.getPromptList();

    this.formData.content = this.question;

    this.getFirstChat()
  },

   watch:{

     'formData.largeModel':{
       handler(val){
         let that = this;
         const commonMode =   {
           id:'1',
           name:this.$t('largeModel.commonMode') //普通模式
         };
         const precisionMode = {
           id:'2',
           name:this.$t('largeModel.precision') //精确模式
         };
         const extensionMode = {
           id:'3',
           name:this.$t('largeModel.extension') //拓展模式
         };
         that.modeList = [];
         that.formData.mode = '';
         setTimeout(()=>{
           const arr = that.largeList.filter(item=>{
             if(item.id == val){
               return item
             }
           });
           if(!arr.length){
             return
           }
           const pattern = arr[0].pattern;
           if(pattern !== null){
             const patternArr = pattern.split(',');
             patternArr.forEach((item)=>{
               if(item == 1){
                 that.modeList.push(commonMode)
               }else if (item == 2){
                 that.modeList.push(precisionMode)
               }else if (item == 3){
                 that.modeList.push(extensionMode)
               }
             })
           }else{
             that.modeList = [];
           }
         },10)
       },
       immediate:true
     },

     searchList:{
       handler(val){
         this.data = [];
         val.forEach((item,index)=>{
           const info = {
             id:index,
             similarProblems:item
           };
           this.data.push(info)
         });
       }
     },
   },
   methods:{
     //获取模型列表
     getModelList(){
       const info = {
         current:1,
         size:10000,
         name:'',
         type:'',
       };
       modelList(info).then(res=>{
         if(res.data.code == 200){
           const Data = res.data.data;
           this.largeList = Data.records;
           this.notLargeList = Data.records;
         }
       })
     },
     //获取提示词列表
     getPromptList(){
       const info = {
         type:'',
         isDefault:'',
         name:'',
         current:1,
         size:10000,
         businessType:1
       };
       modelPromptList(info).then(res=>{
         if(res.data.code == 200){
           const Data = res.data.data;
           this.promptList = Data.records;
         }
       })
     },
     //进行首次问答
     getFirstChat(){
       const info = {
         type:1,
         status:1,
         content: this.formData.content,
       };
       this.loading = true
       modelSettingFirstChat(info).then(res=>{
         if(res.data.code == 200){
           var Data = res.data.data;
           if(Data !== null){
             Data = Data.replace(/^"|"$/g, '');
             Data = Data.replace(/\\(\\)?n/g, '\n');
             const DataArr = Data.split('\n');
             this.searchList = DataArr.map(item=>{
               return item.replace(/^\d+\.\s*\*?\s?/, '').trim()
             });

             this.searchList = this.searchList.filter(item=>{
               return item.trim() != ''
             })
           }
         }
         this.loading = false
       }).catch(()=>{
         this.loading = false
       })
     },
     handlerTest(val){
       this.searchList = [];
       const DataArr = val.split('\n');
       this.searchList = DataArr.map(item=>{
         return item.replace(/^\d+\.\s*\*?\s?/, '').trim()
       });

       this.searchList = this.searchList.filter(item=>{
         return item.trim() != ''
       })
     },
     handlerSave(){
       this.showPrompt = false;
       this.getPromptList();
     },
     handlerCancel(){
       this.showPrompt = false;
     },
     //重新生成答案
     handlerReBuild(){
       const info = {
         modelId:this.formData.largeModel,
         promatId:this.formData.tipWord,
         pattern:this.formData.mode,
         content:this.formData.content,
         top:'',
         temperature:''
       };
       this.loading = true
       modelSettingChat(info).then(res=>{
         if(res.data.code == 200){
           this.searchList = [];
           var Data = res.data.data;
           if(Data !== null){
             Data = Data.replace(/^"|"$/g, '');
             Data = Data.replace(/\\(\\)?n/g, '\n');
             const DataArr = Data.split('\n');
             this.searchList = DataArr.map(item=>{
               return item.replace(/^\d+\.\s*\*?\s?/, '').trim()
             });

             this.searchList = this.searchList.filter(item=>{
               return item.trim() != ''
             })
           }
           this.loading = false
         }
       }).catch(()=>{
         this.loading = false
       })
     },

     //右侧添加至左侧,同时删除右侧数据
     handlerAdd(item,index){
       // this.searchList.forEach(ele=>{
       //   if(ele == item.similarProblems){
       //     this.chooseList.push(item)
       //     this.searchList.splice(index,1)
       //     this.data.splice(index,1)
       //   }
       // })
       //如果点击的index和data数组对象中的id一致就添加给chooseList
       if(item.id == index){
         this.chooseList.push(item)
         this.searchList.splice(index,1)
         this.data.splice(index,1)
       }
     },

     //添加全部数据
     handlerSelectAll(){
       this.searchList.forEach((ele,index)=>{
         const info = {
           id:index,
           similarProblems:ele
         };
         this.chooseList.push(info)
       })
        this.searchList = []
     },

     //删除单个列表数据
     handlerRemove(item,index,position){
       if(position == 'right'){
         this.searchList.splice(index,1)
         this.data.splice(index,1)
       }else if (position == 'left'){
         this.chooseList.splice(index,1)
         this.data.splice(index,1)
       }
     },

     getRowActions() {
       const map = {
         addBtn: {
           name: this.$t('kwIntentionManage.addBtnName'), //添加
           command: 'rowAdd'
         },
         delBtn: {
           name: this.$t('aiccCommon.delete'), //删除
           command: 'rowDel',
         },
       };
       //加入功能项判断权限使用的
       const list = ['addBtn','delBtn',];
       const actions =[];

       list.forEach(item=> {
         //有功能项在打开这个限制
         // if(this.permissionList[item]) {
         actions.push(map[item])
         // }

         // actions.push(map[item])
       })
       return actions;
     },

     handleCommand(command,row,index){
        if(command == 'rowAdd'){
          this.handlerAdd(row,index)
        }else if (command == 'rowDel'){
          this.handlerRemove(row,index,'right')
        }
     },
   },
 }
</script>

<style scoped lang="scss">
.largeModel-container{
  display: flex;
  .left{
    width:70%;
    height: 516px;
    overflow-y:auto;
    overflow-x:hidden;
    .tips{
      color: rgb(149, 151, 160);
      font-size: 12px;
      margin: 10px 0;
    }
    .search-container{
      .content{
        display: flex;
        align-items: center;
        span{
          white-space: nowrap;
        }
      }
    }

    .list-container{
      border-left: 1px solid #dadce1;
      border-right: 1px solid #dadce1;
      .select-all{
        text-align: right;
        padding-right: 10px;
      }
      .list{
        .list-ul{
          height: 300px;
          overflow: auto;
          padding:0 10px;
          .list-item{
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 10px;
            border-bottom: 1px solid #dadce1;
            height: 40px;
            line-height: 40px;
            .list-item-text{
              //width: 100%;
              width:calc(100% - 70px);
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
              font-size: 16px;
            }
            .list-item-operate{
              display: flex;
              align-items: center;
            }
          }
        }
      }
    }
  }
  .right{
    width:30%;
    padding:0 10px;
    .right-title{
      //padding-top: 20px;
      padding-left: 20px;
      font-size: 16px;
      font-weight: 700;
    }
    .list-ul{

      height: 440px;
      overflow: auto;
      padding:0;
      .list-item{
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 48px;
        line-height: 48px;
        cursor: pointer;
        padding:0 10px;
        &:hover{
          background:#e5eeff;
          color:#3b75ff;
        }
        .list-item-text{
          //width: 100%;
          width:calc(100% - 70px);
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          font-size: 14px;
        }
        .list-item-operate{
          display: flex;
          align-items: center;
        }
      }
    }
  }
}

/deep/ .el-col{
  margin-bottom: 0;
}

.right-list{
  //background: #f3fafe;
  margin-top: 35px;
  border-left: 1px solid #dadce1;
  .list-ul{
    margin-bottom: 0;
  }
}
</style>
